<template>
  <view class="banner-bg" v-if="bannerList?.length" :style="props.bannerStyle">
    <view class="banner-box">
      <swiper class="swiper" :style="{borderRadius: props.borderRadius}" circular :autoplay="true" @change="bannerChange">
        <swiper-item class="swiper-item" v-for="item in bannerList" :key="item.id">
          <image class="banner-img" :src="item.imageUrl" alt="no data" mode="scaleToFill" @click="jumpUrl(item.jumpAddress)" />
        </swiper-item>
      </swiper>
      <view class="dots-panel">
        <view class="dots">
          <view v-for="num in bannerList.length" :key="num" :class="['dot',bannerIndex === (num - 1) ? 'dot-now' : '']"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  type: {
    validator (value) {
      // 活动中心:activity_center; 我的:mine; 小饼干首页:cracker_index; 首页发现:discover_index
      return ['activity_center', 'mine', 'cracker_index', 'discover_index'].indexOf(value) !== -1
    },
    default: 'activity_center'
  },
  borderRadius: {
    type: String,
    default: '12rpx'
  },
  bannerStyle: [String, Object]
})
const bannerList = ref([])
const getBannerList = () => {
  $https({
    url: '/bannerSet/available/list',
    type: '',
    method: 'get',
    data: {
      location: props.type
    }
  }).then(res => {
    bannerList.value = res.data || []
  })
}
if (props.list && props.list.length > 0) {
  bannerList.value = [...props.list]
} else {
  getBannerList()
}
const bannerIndex = ref(0)
const bannerChange = (e) => {
  bannerIndex.value = e.detail?.current || 0
}
const jumpUrl = (url) => {
  if (url.indexOf('http') === -1) {
    uni.navigateTo({
      url,
      fail: () => {
        uni.switchTab({ url })
      }
    })
  } else {
    uni.navigateTo({
      url: '/activity/webUrl?url=' + encodeURIComponent(url)
    })
  }
}
</script>

<style scoped lang="scss">
.banner-bg{
  width: 100%;
  height: 100%;
}
.banner-box{
  width: 100%;
  height: 100%;
  position: relative;
  .swiper{
    height: 100%;
    border-radius: 12rpx;
    overflow: hidden;
  }
  .banner-img{
    width: 100%;
    height: 100%;
  }
}
.dots-panel{
  position: absolute;
  bottom: 24rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  .dots{
    .dot{
      display: inline-block;
      width: 12rpx;
      height: 12rpx;
      border-radius: 12rpx;
      background-color: #EFEFEF;
      transition: 0.3s;
      margin: 0 8rpx;
    }
    .dot-now{
      width: 24rpx;
      background-color: #EE751E;
    }
  }
}
</style>
